<template>
    <div class="chart" id="riverchart">
    </div>
</template>

<script>
    import { inject, onMounted, reactive  } from "vue";
    import emitter from '../bus'

    export default {
        setup() {
      // 引入echarts
      let $echarts = inject("echarts");
      let $http = inject("axios");
      // 数据接收
      let RiverData = reactive({});
      let data = reactive([]);
      let myChart;
      function setData(site,mouth) {
        data.splice(0,data.length)
        if (RiverData.data.length > 0) {
            for (let item of RiverData.data) {
              if(item['站点']==site&&item['月']==mouth){
                let date1=[]
                let date2=[]
                let date3=[]
                let date4=[]
                let date5=[]
                let date6=[]
                date1.push(item['日期'])
                date1.push(item['SO2']);
                date1.push('SO2');
                data.push(date1)

                date2.push(item['日期'])
                date2.push(item['NO2']);
                date2.push('NO2');
                data.push(date2)

                date3.push(item['日期'])
                date3.push(item['CO']);
                date3.push('CO');
                data.push(date3)

                date4.push(item['日期'])
                date4.push(item['O3']);
                date4.push('O3');
                data.push(date4)

                date5.push(item['日期'])
                date5.push(item['PM10']);
                date5.push('PM10');
                data.push(date5)

                date6.push(item['日期'])
                date6.push(item['PM2.5']);
                date6.push('PM2.5');
                data.push(date6)                
              }
            }
        }
        console.log('这是河流图的data',data)
      }
      async function getState() {
        RiverData = await $http({ url: "/siteday/site-day" });
        console.log(RiverData.data)
      }
      onMounted(() => {
      drawRiver("九州社区",1)
      emitter.on('Radarsite', (Radarsite) => {
        emitter.on('Radarmouth', (Radarmouth) => {
          drawRiver(Radarsite,Radarmouth)
        })
      })
      function drawRiver(site,mouth){
        if (myChart != null && myChart != "" && myChart != undefined) {
            myChart.dispose();//销毁
        }
        // 初始化echarts
        myChart = $echarts.init(document.getElementById("riverchart"));
        
        getState().then(() => {
          setData(site,mouth);
          myChart.setOption({
            title: 
              {
                text: site+'-'+mouth+'月份-六项数据主题河流图',
                textStyle:{
                  color: 'bisque'//字体颜色
                },
                left: 'center',
                top: '10%',
                // triggerEvent: true,
              },
            tooltip: {
                trigger: 'axis',
                axisPointer: {
                type: 'line',
                lineStyle: {
                    color: 'rgba(0,0,0,0.2)',
                    width: 1,
                    type: 'solid'
                }
                }
            },
            legend: {
                data: ['SO2','NO2','CO','O3','PM10','PM2.5']
            },
            singleAxis: {
                top: 50,
                bottom: 50,
                axisTick: {},
                axisLabel: {},
                type: 'time',
                axisPointer: {
                animation: true,
                label: {
                    show: true
                }
                },
                splitLine: {
                show: true,
                lineStyle: {
                    type: 'dashed',
                    opacity: 0.2
                }
                }
            },
            series: [
                {
                type: 'themeRiver',
                itemStyle: {
                  opacity: 0.7
                },
                emphasis: {
                    itemStyle: {
                    shadowBlur: 10,
                    shadowColor: 'rgba(0, 0, 0, 0.2)'
                    }
                },
                data: data,
                }
            ]
          });
          window.onresize = myChart.resize;
          myChart.on("click", params => {
            let mouth =params.data[0].split('/')
            console.log(mouth[1])
            emitter.emit("linemouth", mouth[1])
            })
        });
      
      }
      });
      return {
        getState,
        RiverData,
        data,
        setData,
        myChart,
      };
    },
    }
</script>

<style lang="css" scoped>
  .chart {
    height: 320px;
  }
</style>